<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
    <title>前台</title>
</head>

<body>
    <div id="app">
        <div>1.v-text指令</div>
        <div v-text="{{aaa.aa.a}}"></div>
        <br />
        <div>2.{{指令</div>
        <div>{{aaa.b}} 啊啊啊啊啊{{aaa.a}}</div>
        <br />
        <div>3.输入框双向绑定</div>
        <div>{{aaa.a}}</div>
        <br />
        <input type="text" value="{{aaa.a}}">
        <input type="text" value="{{aaa.b}}">
        <br />
        <br />
        <div>4.v-html指令</div>
        <div v-html="{{html}}"></div>
        <div>4.列表循环</div>
        <div v-for="{{list:(item,index)}}" class="list" v-if="{{index == 0}}">
            <div style="color:#f00">{{item.a}}吼吼吼{{index}}</div>
            
        </div>
        <br />
        <div>5.v-show指令</div>
        <div v-show="{{aaa.b}}">可以看见我了{{aaa.b}}</div>
        <div v-show="{{!aaa.b}}">真正的我隐藏了</div>
        <br />
        <div>6. :指令</div>
        <div :style="{{'color:'+color}}">我是红色的</div>
        <div>7. 加减乘除</div>
        <div>{{1 + (2 / 5)}}</div>
        <div>8. v-if指令</div>
        <div v-if="{{aaa.b == 2222}}" :style="{{'color:'+color}}">可以看见我了{{aaa.b}}</div>
        <div v-else-if="{{aaa.a == 'aaa'}}">可以看见我了</div>
        <div v-else>我是最后的</div>
    </div>
    <script src="./dataDom.js"></script>
    <script>
        var insert = new dataDom("app", {
            aaa: {
                a: 111,
                b: 2222,
                aa: {
                    a: 222
                },
            },
            list: [{
                a: 1,
                // list: [1, 2, 3, 4]
            }, {
                a: 2,
                // list: [1, 2, 3, 4]
            }],
            html: "<a href='http://www.baidu.com'>百度</a>",
            color: "#F00"
        });
        setTimeout(function () {
            insert.setData({
                aaa: {
                    a: "aaa",
                    aa: {
                        a: "a11a1"
                    },
                },
            });
        }, 2000);
        setTimeout(function () {
            insert.setData({
                aaa: {
                    a: "啊啊啊",
                    b: 2222,
                    aa: {
                        a: "啊啊啊"
                    }
                },
                list: [{
                    a: "啊",
                    list: [1, 2, 3, 4]
                }, {
                    a: "哦",
                    list: [1, 2, 3, 4]
                }],
                color: "#0f0"
            });
        }, 6000);
    </script>
</body>

</html>